<template>
	<el-row style="margin: 10px 0;">
	        <el-col :span="8">
				<div class="grid-content ep-bg-purple" >
					<span> 书名：</span>
					<el-input style="width: 200px;" v-model="serchBooks.bookName" class="w-50 m-2" placeholder="BookName" />
				</div>
			</el-col>
	        <el-col :span="8">
				<div class="grid-content ep-bg-purple-light" >
					<span> 作者：</span>
					<el-input style="width: 200px;" v-model="serchBooks.bookAuthor" class="w-50 m-2" placeholder="Author" />
				</div>
			</el-col>
	        <el-col :span="8">
				<div class="grid-content ep-bg-purple" >
					<el-button type="danger"  @click="search">搜索</el-button>
					<el-button type="primary"  @click="showVisible = true">添加+</el-button>
				</div>
			</el-col>
	</el-row>
	
	<el-table :data="tableData" style="width: 100%">
		<el-table-column fixed prop="createTime" label="入库时间" width="150" />
		<el-table-column prop="bookName" label="书名" width="160" />
		<el-table-column prop="bookAuthor" label="作者" width="120" />
		<el-table-column prop="bookRemark" label="书籍编号" width="160" />
		<el-table-column prop="bookNum" label="库存数量" width="120" />
		<el-table-column prop="bookType" label="类别" width="120" />
		<el-table-column prop="bookPrice" label="价格" width="120" />
		<el-table-column fixed="right" label="选项" width="120">
			<template #default="scope">
				<el-button link type="primary" size="small" @click="editbook(scope.row)" 
					>编辑</el-button>
				<el-button link type="primary" size="small" @click.prevent="deleteRow(scope.row)">删除</el-button>
			 </template>
		</el-table-column>
	</el-table>
	<!-- 分页 -->
	<el-pagination style="margin-top: 20px;" background 
	layout="prev, pager, next" :total="page.total" 
	v-model:current-page="page.currentPage"
	@current-change="handleCurrentChange"
	/>
	
	<!-- 编辑弹窗-->
	<el-dialog v-model="dialogVisible" title="" width="100%" draggable>
		  <el-form :model="form">
		  <span>书籍，人类进步的阶梯</span>
		    <!-- 介绍-->
		  	<el-descriptions
		  	    class="margin-top"
		  	    title="书籍卡片"
		  	    :column="3"
		  	    border
		  	  >	
		  	    <el-descriptions-item>
		  	      <template #label>
		  	        <div class="cell-item">
		  	          <el-icon >
		  	            <user />
		  	          </el-icon>
		  	          书名：
		  	        </div>
		  	      </template>
		  		 
		  	      <el-input style="width: 200px;" v-model="form.bookName" class="w-50 m-2" placeholder="请输入书名" />
		  	    </el-descriptions-item>
		  	    <el-descriptions-item>
		  	      <template #label>
		  	        <div class="cell-item">
		  	          <el-icon >
		  	            <iphone />
		  	          </el-icon>
		  	          作者：
		  	        </div>
		  	      </template>
		  	      <el-input style="width: 200px;" v-model="form.bookAuthor" class="w-50 m-2" placeholder="作者的名字" />
		  	    </el-descriptions-item>
		  	    <el-descriptions-item>
		  	      <template #label>
		  	        <div class="cell-item">
		  	          <el-icon >
		  	            <location />
		  	          </el-icon>
		  	          图书编号：
		  	        </div>
		  	      </template>
		  	      <el-input style="width: 200px;" v-model="form.bookRemark" class="w-50 m-2" placeholder="输入书籍编号" />
		  	    </el-descriptions-item>
		  	    <el-descriptions-item>
		  	      <template #label>
		  	        <div class="cell-item">
		  	          <el-icon >
		  	            <tickets />
		  	          </el-icon>
		  	          库存
		  	        </div>
		  	      </template>
		  	      <el-input style="width: 200px;"  v-model="form.bookNum" class="w-50 m-2" placeholder="输入数量" />
		  	    </el-descriptions-item>
		  		<el-descriptions-item>
		  		  <template #label>
		  		    <div class="cell-item">
		  		      <el-icon >
		  		        <tickets />
		  		      </el-icon>
		  		      单价
		  		    </div>
		  		  </template>
		  		  <el-input style="width: 200px;" v-model="form.bookPrice" class="w-50 m-2" placeholder="输入价格" />
		  		</el-descriptions-item>
		  		<el-descriptions-item>
		  		  <template #label>
		  		    <div class="cell-item">
		  		      <el-icon >
		  		        <tickets />
		  		      </el-icon>
		  		      类别
		  		    </div>
		  		  </template>
		  		  <el-input style="width: 200px;" v-model="form.bookType" class="w-50 m-2" placeholder="输入书籍类型" />
		  		</el-descriptions-item>
		  	    <el-descriptions-item>
					
		  		    <el-dialog v-model="dialogPreview">
		  		      <img style="width: 100%;height: 100%;" w-full :src="dialogImageUrl" alt="Preview Image" />
		  		    </el-dialog>
		  	    </el-descriptions-item>
		  	  </el-descriptions>
		  	</el-form>
	    <template #footer>
	      <span class="dialog-footer">
	        <el-button @click="dialogVisible = false">取消</el-button>
	        <el-button type="primary" @click="updateBook">
	          确定
	        </el-button>
	      </span>
	    </template>
	</el-dialog>
		
	<!-- 添加书籍弹窗 -->
	<el-dialog v-model="showVisible" title="" width="100%" draggable>
		<el-form :model="form">
	    <span>书籍，人类进步的阶梯</span>
		  <!-- 介绍-->
			<el-descriptions
			    class="margin-top"
			    title="书籍卡片"
			    :column="3"
			    border
			  >
			    <template #extra>
			      <!-- <el-button type="primary">Operation</el-button> -->
			    </template>
				
			
					
			    <el-descriptions-item>
			      <template #label>
			        <div class="cell-item">
			          <el-icon >
			            <user />
			          </el-icon>
			          书名：
			        </div>
			      </template>
				 
			      <el-input style="width: 200px;" v-model="form.bookName" class="w-50 m-2" placeholder="请输入书名" />
			    </el-descriptions-item>
			    <el-descriptions-item>
			      <template #label>
			        <div class="cell-item">
			          <el-icon >
			            <iphone />
			          </el-icon>
			          作者：
			        </div>
			      </template>
			      <el-input style="width: 200px;" v-model="form.bookAuthor" class="w-50 m-2" placeholder="作者的名字" />
			    </el-descriptions-item>
			    <el-descriptions-item>
			      <template #label>
			        <div class="cell-item">
			          <el-icon >
			            <location />
			          </el-icon>
			          图书编号：
			        </div>
			      </template>
			      <el-input style="width: 200px;" v-model="form.bookRemark" class="w-50 m-2" placeholder="输入书籍编号" />
			    </el-descriptions-item>
			    <el-descriptions-item>
			      <template #label>
			        <div class="cell-item">
			          <el-icon >
			            <tickets />
			          </el-icon>
			          库存
			        </div>
			      </template>
			      <el-input style="width: 200px;"  v-model="form.bookNum" class="w-50 m-2" placeholder="输入数量" />
			    </el-descriptions-item>
				<el-descriptions-item>
				  <template #label>
				    <div class="cell-item">
				      <el-icon >
				        <tickets />
				      </el-icon>
				      单价
				    </div>
				  </template>
				  <el-input style="width: 200px;" v-model="form.bookPrice" class="w-50 m-2" placeholder="输入价格" />
				</el-descriptions-item>
				<el-descriptions-item>
				  <template #label>
				    <div class="cell-item">
				      <el-icon >
				        <tickets />
				      </el-icon>
				      类别
				    </div>
				  </template>
				  <el-input style="width: 200px;" v-model="form.bookType" class="w-50 m-2" placeholder="输入书籍类型" />
				</el-descriptions-item>
			    <el-descriptions-item>
			      <template #label>
			        <div class="cell-item">
			          <el-icon >
			            <office-building />
			          </el-icon>
			          书籍图片
			        </div>
			      </template>
			      <!-- 上传框-->
				  <el-upload 
				  :action="upurl" 
				  method="post"
				  ref="uploadRef"
				  list-type="picture-card" 
				  :auto-upload="false"
				  :on-remove="handleRemove"
				  :on-success="uploadSuccess"
				  :limit="1"
				  >
				      <el-icon><Plus /></el-icon>
				  
				      <template #file="{ file }">
				        <div>
				          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
				          <span class="el-upload-list__item-actions">
				            <span
				              class="el-upload-list__item-preview"
				              @click="handlePictureCardPreview(file)"
				            >
				              <el-icon><zoom-in /></el-icon>
				            </span>
							<span
							v-if="!disabled"
							class="el-upload-list__item-delete"
							@click="handleRemove(file)"
						  >
							<el-icon><Delete /></el-icon>
						  </span>
							
				          </span>
				        </div>
				      </template>
				    </el-upload>
				  
				    <el-dialog v-model="dialogPreview">
				      <img style="width: 100%;height: 100%;" w-full :src="dialogImageUrl" alt="Preview Image" />
				    </el-dialog>
			    </el-descriptions-item>
			  </el-descriptions>
			</el-form>
	    <template #footer>
	      <span class="dialog-footer">
	        <el-button @click="reset">重置</el-button>
	        <el-button type="success" @click="addbooks">
	          确定
	        </el-button>
	      </span>
	    </template>
		
	  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref ,getCurrentInstance, onMounted} from 'vue'
import {
  Iphone,
  Location,
  OfficeBuilding,
  Tickets,
  User,
  Plus,
  Delete,
  ZoomIn
} from '@element-plus/icons-vue'
import type { UploadFile, UploadInstance,UploadProps } from 'element-plus'
import {  inject } from 'vue-demi'
import api from '../api';
import mitt from '../utils/mitt';
//页面刷新
const reload = inject('reload')
const dialogVisible = (ref(false))
const showVisible=ref(false)
const disabled = ref(false)
const upurl=ref('')
const dialogImageUrl = ref('')
const dialogPreview= ref(false)
const {proxy} = getCurrentInstance()
const inputBook = ref('')
const inputAuthor = ref('')
const uploadRef=ref<UploadInstance>()
const resUpload=ref()
const form=reactive({
	bookName:'',
	bookAuthor:'',
	bookRemark:'',
	bookNum:'',
	bookType:'',
	bookPrice:'',
	image:''
	
})
const serchBooks=ref({
	bookName:'',
	bookAuthor:''
})
//删除图片
const handleRemove = (file) => {
	uploadRef.value.clearFiles()
}
/**
 * 重置
 */
const reset=()=>{
	uploadRef.value.clearFiles()
	for (const key in form) {
	  delete form[key]
	}
}
//向父组件传递信息
const emit = defineEmits(['get-msg'])
/* 
 图片上传后回显地址*/
const uploadSuccess=(res)=>{
	console.log(res)
	form.image=res.img
	resUpload.value=res.msg
	if(resUpload.value=="success"){
		api.addbookApi(form).then(res=>{
			emit('get-msg',res.data.msg)
			showVisible.value = false
			uploadRef.value.clearFiles()
			for (const key in form) {
			  delete form[key]
			}
			pagelist()
		})
	}
	
}
//添加图书
const addbooks=()=>{
	upurl.value="http://127.0.0.1:8080/books/upload"
	if(form.bookName==''||form.bookType==''){
		emit('get-msg',"请将数据添加完整")
	}else{
		uploadRef.value.submit()
	}
	
	
}

//图片预览
const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogPreview.value = true
}
//编辑数据
const editbook=(res)=>{
	dialogVisible.value=true
	for (const key in res) {
		form[key] = res[key]
	}
}
const updateBook=()=>{
	api.ebookApi(form).then(res=>{
		if(res.data.msg=="success"){
			emit('get-msg',res.data.msg)
			pagelist()
		}
	})
	dialogVisible.value=false
}
//搜索数据
const search = () => {
	console.log(serchBooks)
	if(serchBooks.value.bookAuthor==''&&serchBooks.value.bookName==''){
		pagelist()
		return
	}
	api.querylistApi(serchBooks.value).then(res=>{
		tableData.value=res.data.data
	})
}
//删除行数据
const rowid=reactive({
	id:''
})
const deleteRow = (row) => {
  tableData.value.splice(1, 1)
  rowid.id=row.id
  api.delbookApi(rowid).then(res=>{
	  if(res.data.status=='success'){
		  emit('get-msg',res.data.msg)
	  }
  })
  
}
//页面刷新
const flash=()=>{
	api.booklistApi().then(res=>{	
		tableData.value=res.data.data
	})
}
//初始化数据
onMounted(()=>{
	// api.booklistApi().then(res=>{
	
	// 	tableData.value=res.data.data
	// })
	//兄弟组件互传
	mitt.on('myMsg',(data)=>{
		if(data=='flash'){
			pagelist()
		}
	})
	pagelist()
})
//分页
const page=reactive({
	currentPage: 1,
	total: 16,
	pageSize:5,
	pageCode: 1
})
const pagelist=()=>{
	api.pagelistApi(page).then(res=>{
		tableData.value=res.data.list
		page.total=res.data.total + 15
	})
}
const handleCurrentChange=(val: number)=>{
	page.pageCode=val
	api.pagelistApi(page).then(res=>{
		tableData.value=res.data.list
		page.total=res.data.total + 15
	})
}


const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    author: 'California',
    mark: 'Los-556454',
    number: '223',
	type: '计算机',
    price: '25$',
    tag: 'Home',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    author: 'California',
    mark: 'Los-556454',
    number: '223',
  	type: '计算机',
    price: '25$',
    tag: 'Home',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    author: 'California',
    mark: 'Los-556454',
    number: '223',
  	type: '计算机',
    price: '25$',
    tag: 'Home',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    author: 'California',
    mark: 'Los-556454',
    number: '223',
  	type: '计算机',
    price: '25$',
    tag: 'Home',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    author: 'California',
    mark: 'Los-556454',
    number: '223',
  	type: '计算机',
    price: '25$',
    tag: 'Home',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    author: 'California',
    mark: 'Los-556454',
    number: '223',
  	type: '计算机',
    price: '25$',
    tag: 'Home',
  },
])
</script>
<style>
	.el-upload{
		width:50px;
		height:50px;
	}
	.el-pagination{
		position: fixed;
		bottom: 15%;
		z-index: 999;
	}
</style>